<template>
	<div class="container">
		<el-page-header @back="goBack" content="出库核算列表"></el-page-header>
		<div class="e-m-t-15">
			<el-radio-group v-model="dataType">
				<el-radio-button label="0">出库核算</el-radio-button>
				<el-radio-button label="1">推广奖励核算</el-radio-button>
			</el-radio-group>
		</div>
		<div class="e-m-t-45">
			<div class="flex" style="justify-content: flex-end;">
				<div class="e-flex-1">
					<el-button type="primary" icon="el-icon-plus" plain @click="examine(multipleSelection, true)">批量核算</el-button>
				</div>
				<el-form :inline="true" class="nav-bar-form">
					<el-form-item label="负责小哥">
						<el-select v-model="broid" filterable placeholder="请选择">
							<el-option v-for="item in broList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="打包站">
						<el-select v-model="packstationid" filterable placeholder="请选择">
							<el-option v-for="item in packstationlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="站点">
						<el-select v-model="storeid" filterable placeholder="请选择">
							<el-option v-for="item in storelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange">
			<el-table-column fixed type="selection" width="55" :selectable="selectEnable"></el-table-column>
			<el-table-column fixed prop="number" label="编号" width="200">
			</el-table-column>
			<el-table-column prop="brothername" label="负责小哥">
			</el-table-column>
			<el-table-column prop="amount" label="出库金额（元）" width="180">
			</el-table-column>
			<el-table-column prop="incomeamount" label="核算金额（元）" width="180">
			</el-table-column>
			<el-table-column prop="storename" label="站点" width="180">
			</el-table-column>
			<el-table-column prop="packname" label="打包站" width="180">
			</el-table-column>
			<el-table-column prop="createdate" label="出库完成时间" width="180">
			</el-table-column>
			<el-table-column prop="state" label="订单状态" width="180">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已核验'">{{ scope.row.state }}</span>
					<span class="color-warning" v-else>{{ scope.row.state }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button>
					<el-button @click="examine(scope.row.id)" type="text" size="small"
						v-if="scope.row.state == '待核验'">核算</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<el-dialog title="核算" :visible.sync="dialogVisible" width="500px">
			<el-form :rules="rules" ref="form" :model="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="账号类型" prop="accountid">
					<el-select v-model="form.accountid" placeholder="请选择">
						<el-option v-for="item in paywayList" :key="item.id" :label="item.accountnumber"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="流水账号" prop="flowaccount">
					<el-input v-model="form.flowaccount" placeholder="请填写流水账号"></el-input>
				</el-form-item>
				<el-form-item label="金额" prop="incomeamount">
					<el-input v-model="form.incomeamount" placeholder="请填写金额"></el-input>
				</el-form-item>
				<el-form-item label="到账日期" prop="date">
					<el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
						placeholder="选择到账日期">

					</el-date-picker>
				</el-form-item>
				<el-form-item label="上传资料" prop="picvoucher">
					<cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="handleFilesSuccess"
						class="avatar-uploader">
						<img v-if="form.picvoucher" :src="fileURL + form.picvoucher" class="avatar">
						<div class="avatar-uploader-icon" v-else>
							<div><i class="el-icon-plus"></i></div>
							<div class="e-font-14">上传图片</div>
						</div>
					</cropper-upload>
					<!-- <div class="tips e-p-t-10">建议上传尺寸比例为600*600 </div> -->
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="examineSubmit('form')">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
		return {
			title: '出库核算列表' 
		}
	},
	data() {
		return {
			rules: {
				accountid: [
					{ required: true, message: '请选择账号类型', trigger: 'blur' },
				],
				flowaccount: [
					{ required: true, message: '请输入流水账号', trigger: 'blur' },
				],
				incomeamount: [
					{ required: true, message: '请输入金额', trigger: 'blur' },
				],
				date: [
					{ required: true, message: '请输入到账日期', trigger: 'blur' },
				],
				picvoucher: [
					{ required: true, message: '请输上传图片', trigger: 'blur' },
				],
			},
			broList: [],//小哥数组
			broid: '',//小哥id
			packstationlist: [],//打包站数组
			packstationid: '',//打包站id
			storelist: [],//站点数组
			storeid: '',//站点id
			value: '',
			key: '',
			page: 1,
			pageSize: 10,
			status: 1,
			statusArr: [
				{
					name: '出库核算列表',
					value: 1
				},
				{
					name: '提现申请流水',
					value: 2
				}
			],
			loading: false,
			total: 0,
			dialogVisible: false,
			dialogType: 'add',
			form: {
				ids: [],
				accountid: '',  // 账户类型id
				picvoucher: '', // 资料图片
				incomeamount: null, // 金额
				flowaccount: '',
				data: ''
			},
			tableData: [],
			paywayList: [],
			dataType:0,
			multipleSelection:[]
		}
	},
	watch: {
		dialogVisible(value) {
			if (!value) {
				this.form = {
					id: '',
					accountid: '',  // 账户类型id
					incomeamount: 0, // 金额
					picvoucher: '', // 资料图片
					flowaccount: ''
				}
			}
		},
		status(value) {
			if (value == 1) {
				this.$router.push({
					path: '/finance/list'
				})
			} else {
				this.$router.push({
					path: '/finance/withdrawList'
				})
			}
		},
		dataType(val){
            console.log(val)
            if(val == 0){
                this.$router.push({
					path:'/finance/list'
				})
            }else if(val == 1){
                this.$router.push({
					path:'/finance/commission'
				})
            }
        }
	},
	mounted() {
		this.getList()
		this.getpaywayList()
		this.getbroList()
		this.getstorelist()
		this.getpackstationlist()
	},
	methods: {
		getbroList() {
			this.$axios.post('/Select/BrotherList', {
				"pageIndex": 1,
				"pageSize": 999,
				"offset": 0,
				"key": "",
				"order": [
					{
						"column": "string",
						"isDesc": true
					}
				]
			}).then(res => {
				console.log(res)
				this.broList = res.rows
				this.broList.unshift({
					"id": 0,
					"name": '全部'
				})
			})
		},
		handleSelectionChange(val) {
			this.multipleSelection = val
		},
		selectEnable(row, rowIndex) {
			if (row.state == '已核验') {
				return false
			} else {
				return true// 不禁用
			}
		},
		//大
		getpackstationlist() {
			this.$axios.post('/Select/packstationlist', {
				"pageIndex": 1,
				"pageSize": 999,
				"offset": 0,
				"key": "",
				"order": [
					{
						"column": "string",
						"isDesc": true
					}
				]
			}).then(res => {
				console.log(res)
				this.packstationlist = res.rows
				this.packstationlist.unshift({
					"id": 0,
					"name": '全部'
				})
			})
		},
		//中
		getstorelist() {
			this.$axios.post('/Select/storelist', {
				"pageIndex": 1,
				"pageSize": 999,
				"offset": 0,
				"key": "",
				"order": [
					{
						"column": "string",
						"isDesc": true
					}
				]
			}).then(res => {
				console.log(res)
				this.storelist = res.rows
				this.storelist.unshift({
					"id": 0,
					"name": '全部'
				})
			})
		},
		goBack() {
			this.$router.go(-1)
		},
		handleFilesSuccess(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.picvoucher = res.path
			}
		},
		getpaywayList() {
			this.$axios.post('/Operator/Account/List', {
				"PageIndex": 1,
				"PageSize": 999,
			}).then((res) => {
				this.paywayList = res.rows
			})
		},
		getList() {
			this.loading = true
			this.$axios.post('/Admin/Finance/List', {
				"PageIndex": this.page,
				"PageSize": this.pageSize,
				"Key": this.key,
				"storeId": this.storeid,
				"brotherId": this.broid,
				"puckId": this.packstationid
			}).then((res) => {
				this.tableData = res.rows;
				this.total = res.total;
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		views(id) {
			this.$router.push({
				path: '/finance/Views?id=' + id
			})
		},
		search() {
			this.getList()
		},
		pageChange(e) { // 页码切换事件
			this.page = e;
			this.getList()
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getList()
		},
		examine(ids,isBatch = false) {
			//判断是否批量核算
			if(isBatch){
				if(ids.length > 0){
					this.form.ids = []
					ids.forEach((item)=>{
						this.form.ids.push(item.id)
					})
					this.dialogVisible = true
				}else{
					this.$message.error('请至少选择一条数据核算');
				}
			}else{
				this.form.ids = [ids]
				this.dialogVisible = true
			}
		},
		examineSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$confirm('是否确认要核算此数据?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.post('/Admin/Finance/Examine', this.form).then((res) => {
							this.$message.success(res.msg);
							this.dialogVisible = false
							this.getList()
						})
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});


		}
	}
}
</script>

<style lang="scss">
.text-right {}

.nav-bar {
	padding: 45px 0 0;
}

.send {
	margin-top: 15px;
	margin-right: 10px;
}

.dialogForm {
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 50%;
		float: left;

		&.all {
			width: 100%;
		}

		.el-select {
			width: 100%;
		}
	}
}
</style>
